<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" v-model:value="keyword" placeholder="请输入要查找的关键字"></input>
        <ul>
            <li v-for="item of filterPersons">{{item.name}} - {{item.age}} - {{item.sex}}</li>
        </ul>

        <input type="text" v-model:value="keyword" placeholder="请输入要查找的关键字"></input>
        <ul>
            <li v-for="item of compPesons">{{item.name}} - {{item.age}} - {{item.sex}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: "#root",
            data:function(){
                return {
                    persons:[{id: "001", name:'周冬雨', age:20, sex:'女'},
                        {id: "002", name:'马冬梅', age:19, sex:'女'},
                        {id: "003", name:'周杰伦', age:21, sex:'男'},
                        {id: "004", name:'温兆伦', age:22, sex: '男'}],
                    keyword:"",
                    filterPersons:[],
                    //compPesons:[]
                }
            },
            //watch实现方式
            watch:{
                keyword:{
                    immediate: true, //刚开始就执行一次handler方法，此时输入的数据为空串
                    handler(newValue,oldValue){
                        console.log(newValue,oldValue) //这里如果输入的是""字符串item.name.indexOf(newValue) == 0，相当于所有的数据没有被过滤
                        this.filterPersons = this.persons.filter(item => 
                            item.name.indexOf(newValue) !== -1
                        )
                    }
                }
            },
            computed:{
                compPesons:{
                    get(){
                        //计算结果通过一个return返回
                        return this.persons.filter(item => 
                            item.name.indexOf(this.keyword) !== -1
                        )
                    }
                }
            }
        })
    </script>
     
</body>
</html>